import*as e from"../../../core/i18n/i18n.js";import*as t from"../../../core/platform/platform.js";import*as i from"../../../ui/components/helpers/helpers.js";import*as o from"../../../ui/components/render_coordinator/render_coordinator.js";import*as r from"../../../ui/lit-html/lit-html.js";import*as n from"../../../ui/components/input/input.js";import*as s from"../../../core/common/common.js";import*as a from"../../../ui/components/icon_button/icon_button.js";import*as c from"../../../ui/components/node_text/node_text.js";import*as l from"../../../core/sdk/sdk.js";import*as d from"../../../ui/components/legacy_wrapper/legacy_wrapper.js";import*as h from"../../../ui/legacy/legacy.js";const p=new CSSStyleSheet;p.replaceSync(".container{width:100%;display:inline-block}.container:hover{background-color:var(--item-hover-color)}span{color:var(--color-syntax-8);font-family:var(--monospace-font-family);font-size:var(--monospace-font-size)}.role-value{color:var(--color-syntax-2)}.attribute-name{color:var(--color-syntax-4)}.attribute-value{color:var(--color-syntax-3)}\n/*# sourceURL=accessibilityTreeNode.css */\n");const m={ignored:"Ignored"},u=e.i18n.registerUIStrings("panels/elements/components/AccessibilityTreeNode.ts",m),g=e.i18n.getLocalizedString.bind(void 0,u);class f extends HTMLElement{static litTagName=r.literal`devtools-accessibility-tree-node`;#e=this.attachShadow({mode:"open"});#t=!0;#i="";#o="";#r=[];#n="";set data(e){this.#t=e.ignored,this.#i=e.name,this.#o=e.role,this.#r=e.properties,this.#n=e.id,this.#s()}connectedCallback(){this.#e.adoptedStyleSheets=[p]}async#s(){const e=r.html`<span class="role-value">${i=this.#o,i.length>1e4?t.StringUtilities.trimMiddle(i,1e4):i}</span>`;var i;const n=r.html`"<span class="attribute-value">${this.#i}</span>"`,s=this.#r.map((({name:e,value:t})=>function(e){switch(e){case"boolean":case"booleanOrUndefined":case"string":case"number":return!0;default:return!1}}(t.type)?r.html` <span class="attribute-name">${e}</span>: <span class="attribute-value">${t.value}</span>`:r.nothing)),a=this.#t?r.html`<span>${g(m.ignored)}</span>`:r.html`${e} ${n}${s}`;await o.RenderCoordinator.RenderCoordinator.instance().write(`Accessibility node ${this.#n} render`,(()=>{r.render(r.html`<div class="container">${a}</div>`,this.#e,{host:this})}))}}i.CustomElements.defineComponent("devtools-accessibility-tree-node",f);var v,b=Object.freeze({__proto__:null,AccessibilityTreeNode:f});function k(e){switch(e){case v.GRID:return{name:"grid",category:"Layout",enabledByDefault:!0};case v.SUBGRID:return{name:"subgrid",category:"Layout",enabledByDefault:!0};case v.FLEX:return{name:"flex",category:"Layout",enabledByDefault:!0};case v.AD:return{name:"ad",category:"Security",enabledByDefault:!0};case v.SCROLL_SNAP:return{name:"scroll-snap",category:"Layout",enabledByDefault:!0};case v.CONTAINER:return{name:"container",category:"Layout",enabledByDefault:!0};case v.SLOT:return{name:"slot",category:"Layout",enabledByDefault:!0};case v.TOP_LAYER:return{name:"top-layer",category:"Layout",enabledByDefault:!0};case v.REVEAL:return{name:"reveal",category:"Default",enabledByDefault:!0}}}let w;function y(e){if(!w){w=new Map;for(const{name:e,category:t}of Object.values(v).map(k))w.set(e,t)}return w.get(e)||"Default"}!function(e){e.GRID="grid",e.SUBGRID="subgrid",e.FLEX="flex",e.AD="ad",e.SCROLL_SNAP="scroll-snap",e.CONTAINER="container",e.SLOT="slot",e.TOP_LAYER="top-layer",e.REVEAL="reveal"}(v||(v={}));const x=Object.values(v).map(k).map((({name:e,enabledByDefault:t})=>({adorner:e,isEnabled:t})));const S=new Map(["Security","Layout","Default"].map(((e,t)=>[e,t+1])));var T=Object.freeze({__proto__:null,get RegisteredAdorners(){return v},getRegisteredAdorner:k,DefaultAdornerSettings:x,AdornerManager:class{#a=new Map;#c;constructor(e){this.#c=e,this.#l()}updateSettings(e){this.#a=e,this.#d()}getSettings(){return this.#a}isAdornerEnabled(e){return this.#a.get(e)||!1}#d(){const e=[];for(const[t,i]of this.#a)e.push({adorner:t,isEnabled:i});this.#c.set(e)}#h(){const e=this.#c.get();for(const t of e)this.#a.set(t.adorner,t.isEnabled)}#l(){this.#h();const e=new Set(this.#a.keys());for(const{adorner:t,isEnabled:i}of x)e.delete(t),this.#a.has(t)||this.#a.set(t,i);for(const t of e)this.#a.delete(t);this.#d()}},AdornerCategoryOrder:S,compareAdornerNamesByCategory:function(e,t){return(S.get(y(e))||Number.POSITIVE_INFINITY)-(S.get(y(t))||Number.POSITIVE_INFINITY)}});const O=new CSSStyleSheet;O.replaceSync('.adorner-settings-pane{display:flex;height:2.67em;padding:0 12px;color:var(--color-text-primary);font-size:12px;align-items:center}.settings-title{font-weight:500}.setting{margin-left:1em}.adorner-status{margin:auto 0.4em auto 0}.adorner-status,\n.adorner-name{vertical-align:middle}.close{position:relative;margin-left:auto;font-size:1em;width:1.5em;height:1.5em;border:none;border-radius:50%;background-color:var(--color-background-elevation-1)}.close::before,\n.close::after{content:"";display:inline-block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:1em;height:0.2em;background-color:var(--color-text-secondary);border-radius:2px}.close:hover,\n.close:focus{background-color:var(--color-background-elevation-2)}.close::before{transform:rotate(45deg)}.close::after{transform:rotate(-45deg)}\n/*# sourceURL=adornerSettingsPane.css */\n');const C={settingsTitle:"Show badges",closeButton:"Close"},N=e.i18n.registerUIStrings("panels/elements/components/AdornerSettingsPane.ts",C),M=e.i18n.getLocalizedString.bind(void 0,N),{render:E,html:_}=r;class $ extends Event{static eventName="adornersettingupdated";data;constructor(e,t,i){super($.eventName,{}),this.data={adornerName:e,isEnabledNow:t,newSettings:i}}}class L extends HTMLElement{static litTagName=r.literal`devtools-adorner-settings-pane`;#e=this.attachShadow({mode:"open"});#p=new Map;connectedCallback(){this.#e.adoptedStyleSheets=[n.checkboxStyles,O]}set data(e){this.#p=new Map(e.settings.entries()),this.#s()}show(){this.classList.remove("hidden");const e=this.#e.querySelector(".adorner-settings-pane");e&&e.focus()}hide(){this.classList.add("hidden")}#m(e){const t=e.target,i=t.dataset.adorner;if(void 0===i)return;const o=t.checked;this.#p.set(i,o),this.dispatchEvent(new $(i,o,this.#p)),this.#s()}#s(){const e=[];for(const[t,i]of this.#p)e.push(_` <label class="setting" title="${t}"> <input class="adorner-status" type="checkbox" name="${t}" .checked="${i}" data-adorner="${t}"> <span class="adorner-name">${t}</span> </label> `);E(_` <div class="adorner-settings-pane" tabindex="-1"> <div class="settings-title">${M(C.settingsTitle)}</div> <div class="setting-list" @change="${this.#m}"> ${e} </div> <button class="close" @click="${this.hide}" aria-label="${M(C.closeButton)}"></button> </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-adorner-settings-pane",L);var I=Object.freeze({__proto__:null,AdornerSettingUpdatedEvent:$,AdornerSettingsPane:L});const z=new CSSStyleSheet;z.replaceSync(":host{position:relative;overflow:hidden;flex:auto;text-overflow:ellipsis}.computed-style-property{--goto-size:16px;font-family:var(--monospace-font-family);font-size:var(--monospace-font-size);min-height:16px;box-sizing:border-box;padding-top:2px;white-space:nowrap;user-select:text}.computed-style-property:hover{background-color:var(--legacy-focus-bg-color);cursor:text}.computed-style-property.inherited{opacity:50%}.property-name,\n.property-value{display:contents;overflow:hidden;text-overflow:ellipsis}.property-name{width:16em;max-width:52%;margin-right:calc(var(--goto-size) / 2);display:inline-block;vertical-align:text-top;color:var(--webkit-css-property-color,var(--color-syntax-1))}.property-value{margin-left:2em}.goto{display:none;cursor:pointer;position:absolute;width:var(--goto-size);height:var(--goto-size);margin:-1px 0 0 calc(-1 * var(--goto-size));-webkit-mask-image:var(--image-file-mediumIcons);-webkit-mask-position:-32px 48px;background-color:var(--legacy-active-control-bg-color)}.computed-style-property:hover .goto{display:inline-block}.hidden{display:none}:host-context(.computed-narrow) .computed-style-property{white-space:normal}:host-context(.computed-narrow) .property-name,\n:host-context(.computed-narrow) .property-value{display:inline-block;width:100%;max-width:100%;margin-left:0;white-space:nowrap}:host-context(.computed-narrow) .goto{display:none}@media (forced-colors: active){.computed-style-property.inherited{opacity:100%}.computed-style-property:hover{forced-color-adjust:none;background-color:Highlight}.computed-style-property:hover *{color:HighlightText}.goto{background-color:HighlightText}}\n/*# sourceURL=computedStyleProperty.css */\n");const{render:D,html:P}=r;class R extends Event{static eventName="onnavigatetosource";constructor(){super(R.eventName,{bubbles:!0,composed:!0})}}class j extends HTMLElement{static litTagName=r.literal`devtools-computed-style-property`;#e=this.attachShadow({mode:"open"});#u=!1;#g=!1;constructor(){super(),this.#e.adoptedStyleSheets=[z]}set inherited(e){e!==this.#u&&(this.#u=e,this.#s())}set traceable(e){e!==this.#g&&(this.#g=e,this.#s())}#f(){this.dispatchEvent(new R)}#s(){D(P` <div class="computed-style-property ${this.#u?"inherited":""}"> <div class="property-name"> <slot name="name"></slot> </div> <span class="hidden" aria-hidden="false">: </span> ${this.#g?P`<span class="goto" @click="${this.#f}"></span>`:null} <div class="property-value"> <slot name="value"></slot> </div> <span class="hidden" aria-hidden="false">;</span> </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-computed-style-property",j);var H=Object.freeze({__proto__:null,NavigateToSourceEvent:R,ComputedStyleProperty:j});const B=new CSSStyleSheet;B.replaceSync(':host{text-overflow:ellipsis;overflow:hidden;flex-grow:1}.computed-style-trace{margin-left:16px;font-family:var(--monospace-font-family);font-size:var(--monospace-font-size)}.computed-style-trace:hover{background-color:var(--legacy-focus-bg-color);cursor:text}.goto{--size:16px;display:none;cursor:pointer;position:absolute;width:var(--size);height:var(--size);margin:-1px 0 0 calc(-1 * var(--size));-webkit-mask-image:var(--image-file-mediumIcons);-webkit-mask-position:-32px 48px;background-color:var(--legacy-active-control-bg-color)}.computed-style-trace:hover .goto{display:inline-block}.devtools-link{--override-text-decoration-color:hsl(0deg 0% 60%);color:var(--color-text-primary);text-decoration-color:var(--override-text-decoration-color);text-decoration-line:underline;cursor:pointer}.trace-value{margin-left:16px}.computed-style-trace.inactive slot[name="trace-value"]{text-decoration:line-through}.trace-selector{--override-trace-selector-color:rgb(128 128 128);color:var(--override-trace-selector-color);padding-left:2em}.trace-link{user-select:none;float:right;padding-left:1em;position:relative;z-index:1}@media (forced-colors: active){.computed-style-trace:hover{forced-color-adjust:none;background-color:Highlight}.goto{background-color:Highlight}.computed-style-trace:hover *{color:HighlightText}.computed-style-trace:hover .trace-selector{--override-trace-selector-color:HighlightText}}\n/*# sourceURL=computedStyleTrace.css */\n');const{render:A,html:F}=r;class q extends HTMLElement{static litTagName=r.literal`devtools-computed-style-trace`;#e=this.attachShadow({mode:"open"});#v="";#b=!1;#k=()=>{};#w;connectedCallback(){this.#e.adoptedStyleSheets=[B]}set data(e){this.#v=e.selector,this.#b=e.active,this.#k=e.onNavigateToSource,this.#w=e.ruleOriginNode,this.#s()}#s(){A(F` <div class="computed-style-trace ${this.#b?"active":"inactive"}"> <span class="goto" @click="${this.#k}"></span> <slot name="trace-value" @click="${this.#k}"></slot> <span class="trace-selector">${this.#v}</span> <span class="trace-link">${this.#w}</span> </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-computed-style-trace",q);var G=Object.freeze({__proto__:null,ComputedStyleTrace:q});const V=new CSSStyleSheet;V.replaceSync(":host{padding:6px}.hint-popup-wrapper{max-width:232px;font-size:12px;line-height:1.4}code{font-weight:bold;font-family:inherit}.hint-popup-possible-fix{margin-top:8px}.clickable{color:var(--color-link)}.underlined{text-decoration:underline}.unbreakable-text{white-space:nowrap}\n/*# sourceURL=cssHintDetailsView.css */\n");const U={learnMore:"Learn More"},Q=e.i18n.registerUIStrings("panels/elements/components/CSSHintDetailsView.ts",U),W=e.i18n.getLocalizedString.bind(void 0,Q),{render:Y,html:X,Directives:K}=r;class J extends HTMLElement{static litTagName=r.literal`devtools-css-hint-details-view`;#e=this.attachShadow({mode:"open"});#y;constructor(e){super(),this.#y=e,this.#e.adoptedStyleSheets=[V],this.#s()}#s(){const e=this.#y.getLearnMoreLink();Y(X` <div class="hint-popup-wrapper"> <div class="hint-popup-reason"> ${K.unsafeHTML(this.#y.getMessage())} </div> ${this.#y.getPossibleFixMessage()?X` <div class="hint-popup-possible-fix"> ${K.unsafeHTML(this.#y.getPossibleFixMessage())} ${e?X` <x-link id="learn-more" href="${e}" class="clickable underlined unbreakable-text" }> ${W(U.learnMore)} </x-link> `:""} </div> `:""} </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-css-hint-details-view",J);var Z=Object.freeze({__proto__:null,CSSHintDetailsView:J});const ee=new CSSStyleSheet;ee.replaceSync(":host{padding:6px}.docs-popup-wrapper{max-width:350px;font-size:12px;line-height:1.4}.docs-popup-section{margin-top:8px}.clickable{color:var(--color-link)}.underlined{text-decoration:underline}.unbreakable-text{white-space:nowrap}.footer{display:flex;justify-content:space-between}.dont-show input{vertical-align:bottom}\n/*# sourceURL=cssPropertyDocsView.css */\n");const te={learnMore:"Learn more",dontShow:"Don't show"},ie=e.i18n.registerUIStrings("panels/elements/components/CSSPropertyDocsView.ts",te),oe=e.i18n.getLocalizedString.bind(void 0,ie),{render:re,html:ne}=r;class se extends HTMLElement{static litTagName=r.literal`devtools-css-property-docs-view`;#e=this.attachShadow({mode:"open"});#x;constructor(e){super(),this.#x=e,this.#e.adoptedStyleSheets=[n.checkboxStyles,ee],this.#s()}#S(e){const t=!e.target.checked;s.Settings.Settings.instance().moduleSetting("showCSSPropertyDocumentationOnHover").set(t)}#s(){const e=this.#x.description,t=this.#x.references?.[0].url;re(ne` <div class="docs-popup-wrapper"> ${e?ne` <div id="description"> ${e} </div> `:r.nothing} ${t?ne` <div class="docs-popup-section footer"> <x-link id="learn-more" href="${t}" class="clickable underlined unbreakable-text"> ${oe(te.learnMore)} </x-link> <label class="dont-show"> <input type="checkbox" @change="${this.#S}"> ${oe(te.dontShow)} </label> </div> `:r.nothing} </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-css-property-docs-view",se);var ae=Object.freeze({__proto__:null,CSSPropertyDocsView:se});const ce=new Set(["tb","tb-rl","vertical-lr","vertical-rl"]);var le;function de(e){if(e===le.LEFT_TO_RIGHT)return le.RIGHT_TO_LEFT;if(e===le.RIGHT_TO_LEFT)return le.LEFT_TO_RIGHT;if(e===le.TOP_TO_BOTTOM)return le.BOTTOM_TO_TOP;if(e===le.BOTTOM_TO_TOP)return le.TOP_TO_BOTTOM;throw new Error("Unknown PhysicalFlexDirection")}function he(e){return{...e,"row-reverse":de(e.row),"column-reverse":de(e.column)}}function pe(e){const t="rtl"===e.get("direction"),i=e.get("writing-mode");return he(i&&ce.has(i)?{row:t?le.BOTTOM_TO_TOP:le.TOP_TO_BOTTOM,column:"vertical-lr"===i?le.LEFT_TO_RIGHT:le.RIGHT_TO_LEFT}:{row:t?le.RIGHT_TO_LEFT:le.LEFT_TO_RIGHT,column:le.TOP_TO_BOTTOM})}function me(e){let t=!0,i=!1,o=-90;return e===le.RIGHT_TO_LEFT?(o=90,i=!1,t=!1):e===le.TOP_TO_BOTTOM?(o=0,t=!1,i=!1):e===le.BOTTOM_TO_TOP&&(o=0,t=!1,i=!0),{iconName:"flex-direction",rotate:o,scaleX:t?-1:1,scaleY:i?-1:1}}function ue(e,t){return{iconName:e,rotate:t===le.RIGHT_TO_LEFT?90:t===le.LEFT_TO_RIGHT?-90:0,scaleX:1,scaleY:1}}function ge(e,t){return{iconName:e,rotate:t===le.TOP_TO_BOTTOM?90:t===le.BOTTOM_TO_TOP?-90:0,scaleX:t===le.RIGHT_TO_LEFT?-1:1,scaleY:1}}function fe(e,t){return{iconName:e,rotate:t===le.TOP_TO_BOTTOM?90:t===le.BOTTOM_TO_TOP?-90:0,scaleX:t===le.RIGHT_TO_LEFT?-1:1,scaleY:1}}function ve(e,t){return{iconName:e,rotate:t===le.RIGHT_TO_LEFT?90:t===le.LEFT_TO_RIGHT?-90:0,scaleX:1,scaleY:1}}function be(e){return function(t){return me(pe(t)[e])}}function ke(e){return function(t){const i=pe(t),o=new Map([["column",i.row],["row",i.column],["column-reverse",i.row],["row-reverse",i.column]]),r=t.get("flex-direction")||"row",n=o.get(r);if(!n)throw new Error("Unknown direction for flex-align icon");return ue(e,n)}}function we(e){return function(t){const i=pe(t);return ue(e,i.column)}}function ye(e){return function(t){const i=pe(t);return ge(e,i[t.get("flex-direction")||"row"])}}function xe(e){return function(t){const i=pe(t);return ge(e,i.row)}}function Se(e){return function(t){const i=pe(t);return fe(e,i.row)}}function Te(e){return function(t){const i=pe(t),o=new Map([["column",i.row],["row",i.column],["column-reverse",i.row],["row-reverse",i.column]]),r=t.get("flex-direction")||"row",n=o.get(r);if(!n)throw new Error("Unknown direction for flex-align icon");return ve(e,n)}}function Oe(e){return function(t){const i=pe(t);return ve(e,i.column)}}function Ce(){return{iconName:"align-items-baseline",rotate:0,scaleX:1,scaleY:1}}function Ne(e){return function(t,i){return Te(e)(i)}}function Me(e){return function(t,i){return Oe(e)(i)}}function Ee(e,t){return{iconName:e,rotate:t===le.BOTTOM_TO_TOP||t===le.TOP_TO_BOTTOM?90:0,scaleX:1,scaleY:1}}function _e(e){return function(t){const i=pe(t),o=t.get("flex-direction")||"row";return Ee(e,i[o])}}!function(e){e.LEFT_TO_RIGHT="left-to-right",e.RIGHT_TO_LEFT="right-to-left",e.BOTTOM_TO_TOP="bottom-to-top",e.TOP_TO_BOTTOM="top-to-bottom"}(le||(le={}));const $e=new Map([["flex-direction: row",be("row")],["flex-direction: column",be("column")],["flex-direction: column-reverse",be("column-reverse")],["flex-direction: row-reverse",be("row-reverse")],["flex-direction: initial",be("row")],["flex-direction: unset",be("row")],["flex-direction: revert",be("row")],["align-content: center",ke("align-content-center")],["align-content: space-around",ke("align-content-space-around")],["align-content: space-between",ke("align-content-space-between")],["align-content: stretch",ke("align-content-stretch")],["align-content: space-evenly",ke("align-content-space-evenly")],["align-content: flex-end",ke("align-content-end")],["align-content: flex-start",ke("align-content-start")],["align-content: start",ke("align-content-start")],["align-content: end",ke("align-content-end")],["align-content: normal",ke("align-content-stretch")],["align-content: revert",ke("align-content-stretch")],["align-content: unset",ke("align-content-stretch")],["align-content: initial",ke("align-content-stretch")],["justify-content: center",ye("justify-content-center")],["justify-content: space-around",ye("justify-content-space-around")],["justify-content: space-between",ye("justify-content-space-between")],["justify-content: space-evenly",ye("justify-content-space-evenly")],["justify-content: flex-end",ye("justify-content-end")],["justify-content: flex-start",ye("justify-content-start")],["align-items: stretch",Te("align-items-stretch")],["align-items: flex-end",Te("align-items-end")],["align-items: flex-start",Te("align-items-start")],["align-items: center",Te("align-items-center")],["align-items: baseline",Ce],["align-content: baseline",Ce],["flex-wrap: wrap",_e("flex-wrap")],["flex-wrap: nowrap",_e("flex-no-wrap")]]),Le=new Map([["align-self: baseline",Ce],["align-self: center",Ne("align-self-center")],["align-self: flex-start",Ne("align-self-start")],["align-self: flex-end",Ne("align-self-end")],["align-self: stretch",Ne("align-self-stretch")]]),Ie=new Map([["align-content: center",we("align-content-center")],["align-content: space-around",we("align-content-space-around")],["align-content: space-between",we("align-content-space-between")],["align-content: stretch",we("align-content-stretch")],["align-content: space-evenly",we("align-content-space-evenly")],["align-content: end",we("align-content-end")],["align-content: start",we("align-content-start")],["align-content: baseline",Ce],["justify-content: center",xe("justify-content-center")],["justify-content: space-around",xe("justify-content-space-around")],["justify-content: space-between",xe("justify-content-space-between")],["justify-content: space-evenly",xe("justify-content-space-evenly")],["justify-content: end",xe("justify-content-end")],["justify-content: start",xe("justify-content-start")],["align-items: stretch",Oe("align-items-stretch")],["align-items: end",Oe("align-items-end")],["align-items: start",Oe("align-items-start")],["align-items: center",Oe("align-items-center")],["align-items: baseline",Ce],["justify-items: center",Se("justify-items-center")],["justify-items: stretch",Se("justify-items-stretch")],["justify-items: end",Se("justify-items-end")],["justify-items: start",Se("justify-items-start")],["justify-items: baseline",Ce]]),ze=new Map([["align-self: baseline",Ce],["align-self: center",Me("align-self-center")],["align-self: start",Me("align-self-start")],["align-self: end",Me("align-self-end")],["align-self: stretch",Me("align-self-stretch")]]),De=e=>{const t=e?.get("display");return"flex"===t||"inline-flex"===t},Pe=e=>{const t=e?.get("display");return"grid"===t||"inline-grid"===t};function Re(e,t){const i=$e.get(e);return i?i(t||new Map):null}function je(e,t,i){const o=Le.get(e);return o?o(t||new Map,i||new Map):null}function He(e,t){const i=Ie.get(e);return i?i(t||new Map):null}function Be(e,t,i){const o=ze.get(e);return o?o(t||new Map,i||new Map):null}var Ae=Object.freeze({__proto__:null,get PhysicalDirection(){return le},reverseDirection:de,getPhysicalDirections:pe,rotateFlexDirectionIcon:me,rotateAlignContentIcon:ue,rotateJustifyContentIcon:ge,rotateJustifyItemsIcon:fe,rotateAlignItemsIcon:ve,roateFlexWrapIcon:Ee,findIcon:function(e,t,i){if(De(t)){const i=Re(e,t);if(i)return i}if(De(i)){const o=je(e,t,i);if(o)return o}if(Pe(t)){const i=He(e,t);if(i)return i}if(Pe(i)){const o=Be(e,t,i);if(o)return o}return null},findFlexContainerIcon:Re,findFlexItemIcon:je,findGridContainerIcon:He,findGridItemIcon:Be});const Fe=new CSSStyleSheet;Fe.replaceSync('*{box-sizing:border-box;min-width:0;min-height:0}:root{height:100%;overflow:hidden;--legacy-accent-color:#1a73e8;--legacy-accent-fg-color:#1a73e8;--legacy-accent-color-hover:#3b86e8;--legacy-accent-fg-color-hover:#1567d3;--legacy-active-control-bg-color:#5a5a5a;--legacy-focus-bg-color:hsl(214deg 40% 92%);--legacy-focus-ring-inactive-shadow-color:#e0e0e0;--legacy-input-validation-error:#db1600;--legacy-toolbar-hover-bg-color:#eaeaea;--legacy-selection-fg-color:#fff;--legacy-selection-bg-color:var(--legacy-accent-color);--legacy-selection-inactive-fg-color:#5a5a5a;--legacy-selection-inactive-bg-color:#dadada;--legacy-tab-selected-fg-color:#333;--legacy-divider-border:1px solid var(--color-details-hairline);--legacy-focus-ring-inactive-shadow:0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);--legacy-focus-ring-active-shadow:0 0 0 1px var(--legacy-accent-color);--legacy-item-selection-bg-color:#cfe8fc;--legacy-item-selection-inactive-bg-color:#e0e0e0;--item-hover-color:rgb(56 121 217/10%);--monospace-font-size:10px;--monospace-font-family:monospace;--source-code-font-size:11px;--source-code-font-family:monospace;--override-force-white-icons-background:#fafafa}.-theme-with-dark-background{color-scheme:dark;--legacy-accent-color:#0e639c;--legacy-accent-fg-color:#ccc;--legacy-accent-fg-color-hover:#fff;--legacy-accent-color-hover:rgb(17 119 187);--legacy-active-control-bg-color:#cdcdcd;--legacy-focus-bg-color:hsl(214deg 19% 27%);--legacy-focus-ring-inactive-shadow-color:#5a5a5a;--legacy-toolbar-hover-bg-color:#202020;--legacy-selection-fg-color:#cdcdcd;--legacy-selection-inactive-fg-color:#cdcdcd;--legacy-selection-inactive-bg-color:hsl(0deg 0% 28%);--legacy-tab-selected-fg-color:#eaeaea;--legacy-focus-ring-inactive-shadow:0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);--legacy-item-selection-bg-color:hsl(207deg 88% 22%);--legacy-item-selection-inactive-bg-color:#454545}body{height:100%;width:100%;position:relative;overflow:hidden;margin:0;cursor:default;font-family:".SFNSDisplay-Regular","Helvetica Neue","Lucida Grande",sans-serif;font-size:12px;tab-size:4;user-select:none;color:var(--color-text-primary);background:var(--color-background)}.platform-linux{font-family:Roboto,Ubuntu,Arial,sans-serif}.platform-mac{font-family:".SFNSDisplay-Regular","Helvetica Neue","Lucida Grande",sans-serif}.platform-mac,\n.platform-linux{--override-text-color:rgb(48 57 66);color:var(--override-text-color)}.platform-windows{font-family:"Segoe UI",Tahoma,sans-serif}:focus{outline-width:0}.platform-mac,\n:host-context(.platform-mac){--monospace-font-size:11px;--monospace-font-family:menlo,monospace;--source-code-font-size:11px;--source-code-font-family:menlo,monospace}.platform-windows,\n:host-context(.platform-windows){--monospace-font-size:12px;--monospace-font-family:consolas,lucida console,courier new,monospace;--source-code-font-size:12px;--source-code-font-family:consolas,lucida console,courier new,monospace}.platform-linux,\n:host-context(.platform-linux){--monospace-font-size:11px;--monospace-font-family:dejavu sans mono,monospace;--source-code-font-size:11px;--source-code-font-family:dejavu sans mono,monospace}.-theme-with-dark-background .platform-linux,\n.-theme-with-dark-background .platform-mac,\n:host-context(.-theme-with-dark-background) .platform-linux,\n:host-context(.-theme-with-dark-background) .platform-mac{--override-text-color:rgb(189 198 207)}.monospace{font-family:var(--monospace-font-family);font-size:var(--monospace-font-size)!important}.source-code{font-family:var(--source-code-font-family);font-size:var(--source-code-font-size)!important;white-space:pre-wrap}img{-webkit-user-drag:none}iframe,\na img{border:none}.fill{position:absolute;top:0;left:0;right:0;bottom:0}iframe.fill{width:100%;height:100%}.widget{position:relative;flex:auto;contain:style}.hbox{display:flex;flex-direction:row!important;position:relative}.vbox{display:flex;flex-direction:column!important;position:relative}.view-container > .toolbar{border-bottom:1px solid var(--color-details-hairline)}.flex-auto{flex:auto}.flex-none{flex:none}.flex-centered{display:flex;align-items:center;justify-content:center}.overflow-auto{overflow:auto;background-color:var(--color-background)}iframe.widget{position:absolute;width:100%;height:100%;left:0;right:0;top:0;bottom:0}.hidden{display:none!important}.highlighted-search-result{--override-highlighted-search-result-background-color:rgb(255 255 0/80%);border-radius:1px;background-color:var(--override-highlighted-search-result-background-color);outline:1px solid var(--override-highlighted-search-result-background-color)}.-theme-with-dark-background .highlighted-search-result,\n:host-context(.-theme-with-dark-background) .highlighted-search-result{--override-highlighted-search-result-background-color:hsl(133deg 100% 30%);color:#333}.link{cursor:pointer;text-decoration:underline;color:var(--color-link);outline-offset:2px}button,\ninput,\nselect{font-family:inherit;font-size:inherit}select option,\nselect optgroup,\ninput{background-color:var(--color-background)}input{color:inherit}input::placeholder{--override-input-placeholder-color:rgb(0 0 0/54%);color:var(--override-input-placeholder-color)}.-theme-with-dark-background input::placeholder,\n:host-context(.-theme-with-dark-background) input::placeholder{--override-input-placeholder-color:rgb(230 230 230/54%)}:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve){accent-color:var(--color-checkbox-accent-color)}.harmony-input:not([type]),\n.harmony-input[type="number"],\n.harmony-input[type="text"]{padding:3px 6px;height:24px;border:none;box-shadow:var(--legacy-focus-ring-inactive-shadow)}.harmony-input:not([type]).error-input,\n.harmony-input[type="number"].error-input,\n.harmony-input[type="text"].error-input,\n.harmony-input:not([type]):invalid,\n.harmony-input[type="number"]:invalid,\n.harmony-input[type="text"]:invalid{box-shadow:0 0 0 1px var(--color-red)}.harmony-input:not([type]):not(.error-input):not(:invalid):hover,\n.harmony-input[type="number"]:not(.error-input):not(:invalid):hover,\n.harmony-input[type="text"]:not(.error-input):not(:invalid):hover{box-shadow:var(--legacy-focus-ring-inactive-shadow)}.harmony-input:not([type]):not(.error-input):not(:invalid):focus,\n.harmony-input[type="number"]:not(.error-input):not(:invalid):focus,\n.harmony-input[type="text"]:not(.error-input):not(:invalid):focus{box-shadow:var(--legacy-focus-ring-active-shadow)}.highlighted-search-result.current-search-result{--override-current-search-result-background-color:rgb(255 127 0/80%);border-radius:1px;padding:1px;margin:-1px;background-color:var(--override-current-search-result-background-color)}.dimmed{opacity:60%}.editing{box-shadow:var(--drop-shadow);background-color:var(--color-background);text-overflow:clip!important;padding-left:2px;margin-left:-2px;padding-right:2px;margin-right:-2px;margin-bottom:-1px;padding-bottom:1px;opacity:100%!important}.editing,\n.editing *{color:var(--color-text-primary)!important;text-decoration:none!important}.chrome-select{--override-chrome-select-border-color:rgb(0 0 0/20%);appearance:none;user-select:none;border:1px solid var(--override-chrome-select-border-color);border-radius:2px;color:var(--color-text-primary);font:inherit;margin:0;outline:none;padding-right:20px;padding-left:6px;background-image:var(--image-file-arrow-drop-down-light);background-color:var(--color-background-elevation-0);background-position:right center;background-repeat:no-repeat;min-height:24px;min-width:80px}.chrome-select:disabled{opacity:38%}.-theme-with-dark-background .chrome-select,\n:host-context(.-theme-with-dark-background) .chrome-select{--override-chrome-select-border-color:rgb(230 230 230/20%);background-image:var(--image-file-arrow-drop-down-dark)}.chrome-select:enabled:active,\n.chrome-select:enabled:focus,\n.chrome-select:enabled:hover{--override-select-box-shadow:0 0 0 2px var(--color-button-outline-focus);background-color:var(--color-background-elevation-1);box-shadow:var(--override-select-box-shadow)}.chrome-select:enabled:active{background-color:var(--color-background-elevation-2)}.chrome-select:enabled:focus{border-color:transparent}@media (forced-colors: active) and (prefers-color-scheme: light){.chrome-select{background-image:var(--image-file-arrow-drop-down-light)}.-theme-with-dark-background .chrome-select,\n  :host-context(.-theme-with-dark-background) .chrome-select{background-image:var(--image-file-arrow-drop-down-light)}}@media (forced-colors: active) and (prefers-color-scheme: dark){.chrome-select{background-image:var(--image-file-arrow-drop-down-dark)}.-theme-with-dark-background .chrome-select,\n  :host-context(.-theme-with-dark-background) .chrome-select{background-image:var(--image-file-arrow-drop-down-dark)}}.-theme-with-dark-background .chrome-select:enabled:active,\n.-theme-with-dark-background .chrome-select:enabled:focus,\n.-theme-with-dark-background .chrome-select:enabled:hover,\n:host-context(.-theme-with-dark-background) .chrome-select:enabled:active,\n:host-context(.-theme-with-dark-background) .chrome-select:enabled:focus,\n:host-context(.-theme-with-dark-background) .chrome-select:enabled:hover{--override-select-box-shadow:0 0 0 2px var(--color-button-outline-focus)}.chrome-select-label{margin:0 22px;flex:none}.chrome-select-label p p{margin-top:0;color:var(--color-text-secondary)}.settings-select{margin:0}.chrome-select optgroup,\n.chrome-select option{background-color:var(--color-background-elevation-1);color:var(--color-text-primary)}.gray-info-message{text-align:center;font-style:italic;padding:6px;color:var(--color-text-secondary);white-space:nowrap}span[is="dt-icon-label"]{flex:none}.full-widget-dimmed-banner a{color:inherit}.full-widget-dimmed-banner{color:var(--color-text-secondary);background-color:var(--color-background);display:flex;justify-content:center;align-items:center;text-align:center;padding:20px;position:absolute;top:0;right:0;bottom:0;left:0;font-size:13px;overflow:auto;z-index:500}[is="ui-icon"]{display:inline-block;flex-shrink:0}.-theme-with-dark-background [is="ui-icon"].icon-invert,\n:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-invert{filter:invert(80%) hue-rotate(180deg)}[is="ui-icon"].icon-mask{background-color:var(--icon-default);-webkit-mask-position:var(--spritesheet-position)}.-theme-with-dark-background [is="ui-icon"].icon-mask,\n:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-mask{--override-icon-mask-background-color:rgb(145 145 145)}[is="ui-icon"]:not(.icon-mask){background-position:var(--spritesheet-position)}.spritesheet-smallicons:not(.icon-mask){background-image:var(--image-file-smallIcons)}.spritesheet-smallicons.icon-mask{-webkit-mask-image:var(--image-file-smallIcons)}.spritesheet-largeicons:not(.icon-mask){background-image:var(--image-file-largeIcons)}.spritesheet-largeicons.icon-mask{-webkit-mask-image:var(--image-file-largeIcons)}.spritesheet-mediumicons:not(.icon-mask){background-image:var(--image-file-mediumIcons)}.spritesheet-mediumicons.icon-mask{-webkit-mask-image:var(--image-file-mediumIcons)}.spritesheet-arrowicons{background-image:var(--image-file-popoverArrows)}.spritesheet-3d-center.icon-mask{-webkit-mask-image:var(--image-file-3d-center)}.spritesheet-3d-pan.icon-mask{-webkit-mask-image:var(--image-file-3d-pan)}.spritesheet-3d-rotate.icon-mask{-webkit-mask-image:var(--image-file-3d-rotate)}.spritesheet-arrow-up-down-circle.icon-mask{-webkit-mask-image:var(--image-file-arrow-up-down-circle)}.spritesheet-arrow-up-down.icon-mask{-webkit-mask-image:var(--image-file-arrow-up-down)}.spritesheet-bell.icon-mask{-webkit-mask-image:var(--image-file-bell)}.spritesheet-bezier-curve-filled.icon-mask{-webkit-mask-image:var(--image-file-bezier-curve-filled)}.spritesheet-bin.icon-mask{-webkit-mask-image:var(--image-file-bin)}.spritesheet-bottom-panel-close.icon-mask{-webkit-mask-image:var(--image-file-bottom-panel-close)}.spritesheet-bottom-panel-open.icon-mask{-webkit-mask-image:var(--image-file-bottom-panel-open)}.spritesheet-brackets.icon-mask{-webkit-mask-image:var(--image-file-brackets)}.spritesheet-breakpoint-crossed-filled.icon-mask{-webkit-mask-image:var(--image-file-breakpoint-crossed-filled)}.spritesheet-breakpoint-crossed.icon-mask{-webkit-mask-image:var(--image-file-breakpoint-crossed)}.spritesheet-brush-filled.icon-mask{-webkit-mask-image:var(--image-file-brush-filled)}.spritesheet-brush.icon-mask{-webkit-mask-image:var(--image-file-brush)}.spritesheet-bug.icon-mask{-webkit-mask-image:var(--image-file-bug)}.spritesheet-check-double.icon-mask{-webkit-mask-image:var(--image-file-check-double)}.spritesheet-checkmark.icon-mask{-webkit-mask-image:var(--image-file-checkmark)}.spritesheet-chevron-double-right.icon-mask{-webkit-mask-image:var(--image-file-chevron-double-right)}.spritesheet-chevron-down.icon-mask{-webkit-mask-image:var(--image-file-chevron-down)}.spritesheet-chevron-up.icon-mask{-webkit-mask-image:var(--image-file-chevron-up)}.spritesheet-clear-list.icon-mask{-webkit-mask-image:var(--image-file-clear-list)}.spritesheet-clear.icon-mask{-webkit-mask-image:var(--image-file-clear)}.spritesheet-cloud.icon-mask{-webkit-mask-image:var(--image-file-cloud)}.spritesheet-code-circle.icon-mask{-webkit-mask-image:var(--image-file-code-circle)}.spritesheet-color-picker-filled.icon-mask{-webkit-mask-image:var(--image-file-color-picker-filled)}.spritesheet-color-picker.icon-mask{-webkit-mask-image:var(--image-file-color-picker)}.spritesheet-cookie.icon-mask{-webkit-mask-image:var(--image-file-cookie)}.spritesheet-copy.icon-mask{-webkit-mask-image:var(--image-file-copy)}.spritesheet-credit-card.icon-mask{-webkit-mask-image:var(--image-file-credit-card)}.spritesheet-cross-circle.icon-mask{-webkit-mask-image:var(--image-file-cross-circle)}.spritesheet-cross.icon-mask{-webkit-mask-image:var(--image-file-cross)}.spritesheet-custom-typography.icon-mask{-webkit-mask-image:var(--image-file-custom-typography)}.spritesheet-database.icon-mask{-webkit-mask-image:var(--image-file-database)}.spritesheet-device-fold.icon-mask{-webkit-mask-image:var(--image-file-device-fold)}.spritesheet-devices.icon-mask{-webkit-mask-image:var(--image-file-devices)}.spritesheet-dock-bottom.icon-mask{-webkit-mask-image:var(--image-file-dock-bottom)}.spritesheet-dock-left.icon-mask{-webkit-mask-image:var(--image-file-dock-left)}.spritesheet-dock-right.icon-mask{-webkit-mask-image:var(--image-file-dock-right)}.spritesheet-dock-window.icon-mask{-webkit-mask-image:var(--image-file-dock-window)}.spritesheet-document.icon-mask{-webkit-mask-image:var(--image-file-document)}.spritesheet-dots-vertical.icon-mask{-webkit-mask-image:var(--image-file-dots-vertical)}.spritesheet-download.icon-mask{-webkit-mask-image:var(--image-file-download)}.spritesheet-edit.icon-mask{-webkit-mask-image:var(--image-file-edit)}.spritesheet-experiment-check.icon-mask{-webkit-mask-image:var(--image-file-experiment-check)}.spritesheet-eye.icon-mask{-webkit-mask-image:var(--image-file-eye)}.spritesheet-filter-clear.icon-mask{-webkit-mask-image:var(--image-file-filter-clear)}.spritesheet-filter-filled.icon-mask{-webkit-mask-image:var(--image-file-filter-filled)}.spritesheet-filter.icon-mask{-webkit-mask-image:var(--image-file-filter)}.spritesheet-frame-crossed.icon-mask{-webkit-mask-image:var(--image-file-frame-crossed)}.spritesheet-frame.icon-mask{-webkit-mask-image:var(--image-file-frame)}.spritesheet-gear-filled.icon-mask{-webkit-mask-image:var(--image-file-gear-filled)}.spritesheet-gear.icon-mask{-webkit-mask-image:var(--image-file-gear)}.spritesheet-gears.icon-mask{-webkit-mask-image:var(--image-file-gears)}.spritesheet-heap-snapshot.icon-mask{-webkit-mask-image:var(--image-file-heap-snapshot)}.spritesheet-heap-snapshots.icon-mask{-webkit-mask-image:var(--image-file-heap-snapshots)}.spritesheet-iframe-crossed.icon-mask{-webkit-mask-image:var(--image-file-iframe-crossed)}.spritesheet-iframe.icon-mask{-webkit-mask-image:var(--image-file-iframe)}.spritesheet-import.icon-mask{-webkit-mask-image:var(--image-file-import)}.spritesheet-info.icon-mask{-webkit-mask-image:var(--image-file-info)}.spritesheet-keyboard-pen.icon-mask{-webkit-mask-image:var(--image-file-keyboard-pen)}.spritesheet-layers-filled.icon-mask{-webkit-mask-image:var(--image-file-layers-filled)}.spritesheet-layers.icon-mask{-webkit-mask-image:var(--image-file-layers)}.spritesheet-left-panel-close.icon-mask{-webkit-mask-image:var(--image-file-left-panel-close)}.spritesheet-left-panel-open.icon-mask{-webkit-mask-image:var(--image-file-left-panel-open)}.spritesheet-list.icon-mask{-webkit-mask-image:var(--image-file-list)}.spritesheet-pause.icon-mask{-webkit-mask-image:var(--image-file-pause)}.spritesheet-play.icon-mask{-webkit-mask-image:var(--image-file-play)}.spritesheet-plus.icon-mask{-webkit-mask-image:var(--image-file-plus)}.spritesheet-popup.icon-mask{-webkit-mask-image:var(--image-file-popup)}.spritesheet-profile.icon-mask{-webkit-mask-image:var(--image-file-profile)}.spritesheet-record-start.icon-mask{-webkit-mask-image:var(--image-file-record-start)}.spritesheet-record-stop.icon-mask{-webkit-mask-image:var(--image-file-record-stop)}.spritesheet-refresh.icon-mask{-webkit-mask-image:var(--image-file-refresh)}.spritesheet-replace.icon-mask{-webkit-mask-image:var(--image-file-replace)}.spritesheet-resume.icon-mask{-webkit-mask-image:var(--image-file-resume)}.spritesheet-right-panel-close.icon-mask{-webkit-mask-image:var(--image-file-right-panel-close)}.spritesheet-right-panel-open.icon-mask{-webkit-mask-image:var(--image-file-right-panel-open)}.spritesheet-screen-rotation.icon-mask{-webkit-mask-image:var(--image-file-screen-rotation)}.spritesheet-search.icon-mask{-webkit-mask-image:var(--image-file-search)}.spritesheet-select-element.icon-mask{-webkit-mask-image:var(--image-file-select-element)}.spritesheet-shadow.icon-mask{-webkit-mask-image:var(--image-file-shadow)}.spritesheet-step-into.icon-mask{-webkit-mask-image:var(--image-file-step-into)}.spritesheet-step-out.icon-mask{-webkit-mask-image:var(--image-file-step-out)}.spritesheet-step-over.icon-mask{-webkit-mask-image:var(--image-file-step-over)}.spritesheet-step.icon-mask{-webkit-mask-image:var(--image-file-step)}.spritesheet-stop.icon-mask{-webkit-mask-image:var(--image-file-stop)}.spritesheet-sync.icon-mask{-webkit-mask-image:var(--image-file-sync)}.spritesheet-table.icon-mask{-webkit-mask-image:var(--image-file-table)}.spritesheet-top-panel-close.icon-mask{-webkit-mask-image:var(--image-file-top-panel-close)}.spritesheet-top-panel-open.icon-mask{-webkit-mask-image:var(--image-file-top-panel-open)}.spritesheet-replay.icon-mask{-webkit-mask-image:var(--image-file-replay)}.spritesheet-triangle-bottom-right.icon-mask{-webkit-mask-image:var(--image-file-triangle-bottom-right)}.spritesheet-triangle-down.icon-mask{-webkit-mask-image:var(--image-file-triangle-down)}.spritesheet-triangle-left.icon-mask{-webkit-mask-image:var(--image-file-triangle-left)}.spritesheet-triangle-right.icon-mask{-webkit-mask-image:var(--image-file-triangle-right)}.spritesheet-triangle-up.icon-mask{-webkit-mask-image:var(--image-file-triangle-up)}.spritesheet-undo.icon-mask{-webkit-mask-image:var(--image-file-undo)}.spritesheet-warning.icon-mask{-webkit-mask-image:var(--image-file-warning)}.spritesheet-watch.icon-mask{-webkit-mask-image:var(--image-file-watch)}.force-white-icons [is="ui-icon"].spritesheet-smallicons,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,\n[is="ui-icon"].force-white-icons.spritesheet-smallicons,\n.-theme-preserve{-webkit-mask-image:var(--image-file-smallIcons);-webkit-mask-position:var(--spritesheet-position);background:var(--override-force-white-icons-background)!important}.force-white-icons [is="ui-icon"].spritesheet-largeicons,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,\n[is="ui-icon"].force-white-icons.spritesheet-largeicons,\n.-theme-preserve{-webkit-mask-image:var(--image-file-largeIcons);-webkit-mask-position:var(--spritesheet-position);background:var(--override-force-white-icons-background)!important}.force-white-icons [is="ui-icon"].spritesheet-mediumicons,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,\n[is="ui-icon"].force-white-icons.spritesheet-mediumicons,\n.-theme-preserve{-webkit-mask-image:var(--image-file-mediumIcons);-webkit-mask-position:var(--spritesheet-position);background:var(--override-force-white-icons-background)!important}.force-white-icons [is="ui-icon"].spritesheet-arrow-up-down,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-arrow-up-down,\n[is="ui-icon"].force-white-icons.spritesheet-arrow-up-down,\n.-theme-preserve{-webkit-mask-image:var(--image-file-arrow-up-down);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-bell,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-bell,\n[is="ui-icon"].force-white-icons.spritesheet-bell,\n.-theme-preserve{-webkit-mask-image:var(--image-file-bell);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-bug,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-bug,\n[is="ui-icon"].force-white-icons.spritesheet-bug,\n.-theme-preserve{-webkit-mask-image:var(--image-file-bug);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-cloud,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-cloud,\n[is="ui-icon"].force-white-icons.spritesheet-cloud,\n.-theme-preserve{-webkit-mask-image:var(--image-file-cloud);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-cookie,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-cookie,\n[is="ui-icon"].force-white-icons.spritesheet-cookie,\n.-theme-preserve{-webkit-mask-image:var(--image-file-cookie);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-credit-card,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-credit-card,\n[is="ui-icon"].force-white-icons.spritesheet-credit-card,\n.-theme-preserve{-webkit-mask-image:var(--image-file-credit-card);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-cross-circle,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-cross-circle,\n[is="ui-icon"].force-white-icons.spritesheet-cross-circle,\n.-theme-preserve{-webkit-mask-image:var(--image-file-cross-circle);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-database,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-database,\n[is="ui-icon"].force-white-icons.spritesheet-database,\n.-theme-preserve{-webkit-mask-image:var(--image-file-database);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-dock-bottom,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-dock-bottom,\n[is="ui-icon"].force-white-icons.spritesheet-dock-bottom,\n.-theme-preserve{-webkit-mask-image:var(--image-file-dock-bottom);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-dock-left,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-dock-left,\n[is="ui-icon"].force-white-icons.spritesheet-dock-left,\n.-theme-preserve{-webkit-mask-image:var(--image-file-dock-left);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-dock-right,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-dock-right,\n[is="ui-icon"].force-white-icons.spritesheet-dock-right,\n.-theme-preserve{-webkit-mask-image:var(--image-file-dock-right);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-dock-window,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-dock-window,\n[is="ui-icon"].force-white-icons.spritesheet-dock-window,\n.-theme-preserve{-webkit-mask-image:var(--image-file-dock-window);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-document,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-document,\n[is="ui-icon"].force-white-icons.spritesheet-document,\n.-theme-preserve{-webkit-mask-image:var(--image-file-document);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-frame-crossed,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-frame-crossed,\n[is="ui-icon"].force-white-icons.spritesheet-frame-crossed,\n.-theme-preserve{-webkit-mask-image:var(--image-file-frame-crossed);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-frame,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-frame,\n[is="ui-icon"].force-white-icons.spritesheet-frame,\n.-theme-preserve{-webkit-mask-image:var(--image-file-frame);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-gears,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-gears,\n[is="ui-icon"].force-white-icons.spritesheet-gears,\n.-theme-preserve{-webkit-mask-image:var(--image-file-gears);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-heap-snapshot,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-heap-snapshot,\n[is="ui-icon"].force-white-icons.spritesheet-heap-snapshot,\n.-theme-preserve{-webkit-mask-image:var(--image-file-heap-snapshot);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-heap-snapshots,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-heap-snapshots,\n[is="ui-icon"].force-white-icons.spritesheet-heap-snapshots,\n.-theme-preserve{-webkit-mask-image:var(--image-file-heap-snapshots);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-iframe-crossed,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-iframe-crossed,\n[is="ui-icon"].force-white-icons.spritesheet-iframe-crossed,\n.-theme-preserve{-webkit-mask-image:var(--image-file-iframe-crossed);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-iframe,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-iframe,\n[is="ui-icon"].force-white-icons.spritesheet-iframe,\n.-theme-preserve{-webkit-mask-image:var(--image-file-iframe);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-info,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-info,\n[is="ui-icon"].force-white-icons.spritesheet-info,\n.-theme-preserve{-webkit-mask-image:var(--image-file-info);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-list,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-list,\n[is="ui-icon"].force-white-icons.spritesheet-list,\n.-theme-preserve{-webkit-mask-image:var(--image-file-list);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-popup,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-popup,\n[is="ui-icon"].force-white-icons.spritesheet-popup,\n.-theme-preserve{-webkit-mask-image:var(--image-file-popup);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-profile,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-profile,\n[is="ui-icon"].force-white-icons.spritesheet-profile,\n.-theme-preserve{-webkit-mask-image:var(--image-file-profile);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-sync,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-sync,\n[is="ui-icon"].force-white-icons.spritesheet-sync,\n.-theme-preserve{-webkit-mask-image:var(--image-file-sync);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-table,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-table,\n[is="ui-icon"].force-white-icons.spritesheet-table,\n.-theme-preserve{-webkit-mask-image:var(--image-file-table);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-triangle-right,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-triangle-right,\n[is="ui-icon"].force-white-icons.spritesheet-triangle-right,\n.-theme-preserve{-webkit-mask-image:var(--image-file-triangle-right);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-warning,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-warning,\n[is="ui-icon"].force-white-icons.spritesheet-warning,\n.-theme-preserve{-webkit-mask-image:var(--image-file-warning);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.force-white-icons [is="ui-icon"].spritesheet-watch,\n:host-context(.force-white-icons) [is="ui-icon"].spritesheet-watch,\n[is="ui-icon"].force-white-icons.spritesheet-watch,\n.-theme-preserve{-webkit-mask-image:var(--image-file-watch);-webkit-mask-position:var(--spritesheet-position);background:var(--icon-force-white)!important}.dot::before{content:url("Images/empty.svg");width:6px;height:6px;border-radius:50%;outline:1px solid var(--icon-gap-default);left:9px;position:absolute;top:9px;z-index:1}.green::before{background-color:var(--color-tertiary-bright)}.purple::before{background-color:var(--color-purple-bright)}.expandable-inline-button{background-color:var(--color-background-elevation-2);color:var(--color-text-primary);cursor:pointer;border-radius:3px}.undisplayable-text,\n.expandable-inline-button{padding:1px 3px;margin:0 2px;font-size:11px;font-family:sans-serif;white-space:nowrap;display:inline-block}.undisplayable-text::after,\n.expandable-inline-button::after{content:attr(data-text)}.undisplayable-text{color:var(--color-text-disabled);font-style:italic}.expandable-inline-button:hover,\n.expandable-inline-button:focus-visible{background-color:var(--color-background-elevation-1)}.expandable-inline-button:focus-visible{background-color:var(--color-background-elevation-1)}::selection{--override-selection-background-color:rgb(141 199 248/60%);background-color:var(--override-selection-background-color)}.-theme-with-dark-background *::selection,\n:host-context(.-theme-with-dark-background) *::selection{background-color:rgb(93 93 93/60%)}.reload-warning{align-self:center;margin-left:10px}button.link{border:none;background:none;padding:3px}button.link:focus-visible{--override-link-focus-background-color:rgb(0 0 0/8%);background-color:var(--override-link-focus-background-color);border-radius:2px}.-theme-with-dark-background button.link:focus-visible,\n:host-context(.-theme-with-dark-background) button.link:focus-visible{--override-link-focus-background-color:rgb(230 230 230/8%)}@media (forced-colors: active){.dimmed,\n  .chrome-select:disabled{opacity:100%}[is="ui-icon"].icon-mask,\n  .force-white-icons [is="ui-icon"].spritesheet-smallicons,\n  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,\n  [is="ui-icon"].force-white-icons.spritesheet-smallicons,\n  .force-white-icons [is="ui-icon"].spritesheet-largeicons,\n  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,\n  [is="ui-icon"].force-white-icons.spritesheet-largeicons,\n  .force-white-icons [is="ui-icon"].spritesheet-mediumicons,\n  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,\n  [is="ui-icon"].force-white-icons.spritesheet-mediumicons,\n  .-theme-preserve{forced-color-adjust:none;background-color:ButtonText}.harmony-input:not([type]),\n  .harmony-input[type="number"],\n  .harmony-input[type="text"]{border:1px solid ButtonText}.harmony-input:not([type]):focus,\n  .harmony-input[type="number"]:focus,\n  .harmony-input[type="text"]:focus{border:1px solid Highlight}}input.custom-search-input::-webkit-search-cancel-button{appearance:none;cursor:pointer;width:16px;height:15px;margin-right:0;background-position:-32px 32px;background-image:var(--image-file-mediumIcons)}.spinner::before{display:block;width:var(--dimension,24px);height:var(--dimension,24px);border:var(--override-spinner-size,3px) solid var(--override-spinner-color,var(--color-text-secondary));border-radius:12px;clip:rect(0,var(--clip-size,15px),var(--clip-size,15px),0);content:"";position:absolute;animation:spinner-animation 1s linear infinite;box-sizing:border-box}@keyframes spinner-animation{from{transform:rotate(0)}to{transform:rotate(360deg)}}.adorner-container{display:inline-block}.adorner-container.hidden{display:none}.adorner-container devtools-adorner{margin-left:3px}:host-context(.-theme-with-dark-background) devtools-adorner{--override-adorner-background-color:rgb(var(--color-syntax-2-rgb)/15%);--override-adorner-border-color:rgb(var(--color-syntax-2-rgb)/50%);--override-adorner-focus-border-color:var(--color-syntax-2);--override-adorner-active-background-color:var(--color-syntax-8)}.panel{display:flex;overflow:hidden;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:var(--color-background)}.panel-sidebar{overflow-x:hidden;background-color:var(--color-background-elevation-1)}iframe.extension{flex:auto;width:100%;height:100%}iframe.panel.extension{display:block;height:100%}@media (forced-colors: active){:root{--legacy-accent-color:Highlight;--legacy-focus-ring-inactive-shadow-color:ButtonText}}\n/*# sourceURL=inspectorCommon.css */\n');const qe=new CSSStyleSheet;qe.replaceSync(".query:not(.editing-query){overflow:hidden}.editable .query-text{color:var(--color-text-primary)}.editable .query-text:hover{text-decoration:var(--override-styles-section-text-hover-text-decoration);cursor:var(--override-styles-section-text-hover-cursor)}\n/*# sourceURL=cssQuery.css */\n");const{render:Ge,html:Ve}=r;class Ue extends HTMLElement{static litTagName=r.literal`devtools-css-query`;#e=this.attachShadow({mode:"open"});#T="";#O;#C="";#N;set data(e){this.#T=e.queryPrefix,this.#O=e.queryName,this.#C=e.queryText,this.#N=e.onQueryTextClick,this.#s()}connectedCallback(){this.#e.adoptedStyleSheets=[qe,Fe]}#s(){const e=r.Directives.classMap({query:!0,editable:Boolean(this.#N)}),t=Ve` <span class="query-text" @click="${this.#N}">${this.#C}</span> `;Ge(Ve` <div class="${e}"> ${this.#T?Ve`<span>${this.#T+" "}</span>`:r.nothing}${this.#O?Ve`<span>${this.#O+" "}</span>`:r.nothing}${t} </div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-css-query",Ue);var Qe=Object.freeze({__proto__:null,CSSQuery:Ue});const We=new CSSStyleSheet;We.replaceSync(".variable-value-popup-wrapper{padding:4px 8px}\n/*# sourceURL=cssVariableValueView.css */\n");const{render:Ye,html:Xe}=r;class Ke extends HTMLElement{static litTagName=r.literal`devtools-css-variable-value-view`;#e=this.attachShadow({mode:"open"});#M;constructor(e){super(),this.#M=e,this.#e.adoptedStyleSheets=[We],this.#s()}#s(){Ye(Xe` <div class="variable-value-popup-wrapper">${this.#M}</div> `,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-css-variable-value-view",Ke);var Je=Object.freeze({__proto__:null,CSSVariableValueView:Ke});const Ze=new CSSStyleSheet;Ze.replaceSync(":host{--override-node-text-label-color:var(--color-syntax-2);--override-node-text-class-color:var(--color-syntax-4);--override-node-text-id-color:var(--color-syntax-4);--override-node-text-multiple-descriptors-id:var(--color-syntax-7);--override-node-text-multiple-descriptors-class:var(--color-syntax-4)}.crumbs{display:inline-flex;align-items:stretch;width:100%;overflow:hidden;pointer-events:auto;cursor:default;white-space:nowrap;position:relative;background:var(--color-background);font-size:inherit;font-family:inherit}.crumbs-window{flex-grow:2;overflow:hidden}.crumbs-scroll-container{display:inline-flex;margin:0;padding:0}.crumb{display:block;padding:0 7px;line-height:23px;white-space:nowrap}.overflow{padding:0 5px;font-weight:bold;display:block;border:none;flex-grow:0;flex-shrink:0;text-align:center;background-color:var(--color-background-elevation-1);color:var(--color-text-secondary);margin:1px;outline:var(--color-background-elevation-1) solid 1px}.overflow.hidden{display:none}.overflow:disabled{opacity:50%}.overflow:focus{outline-color:var(--color-primary-old)}.overflow:not(:disabled):hover{background-color:var(--color-background-elevation-2);color:var(--color-text-primary)}.crumb-link{text-decoration:none;color:inherit}.crumb:hover{background:var(--color-background-elevation-2)}.crumb.selected{background:var(--color-background-elevation-1)}.crumb:focus{outline:var(--color-primary-old) auto 1px}\n/*# sourceURL=elementsBreadcrumbs.css */\n");const et={text:"(text)"},tt=e.i18n.registerUIStrings("panels/elements/components/ElementsBreadcrumbsUtils.ts",et),it=e.i18n.getLocalizedString.bind(void 0,tt),ot=(e,t)=>t?e.filter((e=>e.nodeType!==Node.DOCUMENT_NODE)).map((e=>({title:nt(e),selected:e.id===t.id,node:e,originalNode:e.legacyDomNode}))).reverse():[],rt=(e,t={})=>({main:e,extras:t}),nt=e=>{switch(e.nodeType){case Node.ELEMENT_NODE:{if(e.pseudoType)return rt("::"+e.pseudoType);const t=rt(e.nodeNameNicelyCased),i=e.getAttribute("id");i&&(t.extras.id=i);const o=e.getAttribute("class");if(o){const e=new Set(o.split(/\s+/));t.extras.classes=Array.from(e)}return t}case Node.TEXT_NODE:return rt(it(et.text));case Node.COMMENT_NODE:return rt("\x3c!--\x3e");case Node.DOCUMENT_TYPE_NODE:return rt("<!doctype>");case Node.DOCUMENT_FRAGMENT_NODE:return rt(e.shadowRootType?"#shadow-root":e.nodeNameNicelyCased);default:return rt(e.nodeNameNicelyCased)}};var st=Object.freeze({__proto__:null,crumbsToRender:ot,determineElementTitle:nt});const at={breadcrumbs:"DOM tree breadcrumbs",scrollLeft:"Scroll left",scrollRight:"Scroll right"},ct=e.i18n.registerUIStrings("panels/elements/components/ElementsBreadcrumbs.ts",at),lt=e.i18n.getLocalizedString.bind(void 0,ct);class dt extends Event{static eventName="breadcrumbsnodeselected";legacyDomNode;constructor(e){super(dt.eventName,{}),this.legacyDomNode=e.legacyDomNode}}const ht=o.RenderCoordinator.RenderCoordinator.instance();class pt extends HTMLElement{static litTagName=r.literal`devtools-elements-breadcrumbs`;#e=this.attachShadow({mode:"open"});#E=new ResizeObserver((()=>this.#_()));#$=this.#s.bind(this);#L=[];#I=null;#z=!1;#D="start";#P=!1;#R=!1;connectedCallback(){this.#e.adoptedStyleSheets=[Ze]}set data(e){this.#I=e.selectedNode,this.#L=e.crumbs,this.#R=!1,i.ScheduledRender.scheduleRender(this,this.#$)}disconnectedCallback(){this.#P=!1,this.#E.disconnect()}#j(e){return t=>{t.preventDefault(),this.dispatchEvent(new dt(e))}}async#_(){const e=this.#e.querySelector(".crumbs-scroll-container"),t=this.#e.querySelector(".crumbs-window");if(!e||!t)return;const i=await ht.read((()=>t.clientWidth)),o=await ht.read((()=>e.clientWidth));this.#z?o<i&&(this.#z=!1):o>i&&(this.#z=!0),this.#H(),this.#B(t)}#A(e){return()=>e.highlightNode()}#F(e){return()=>e.clearHighlight()}#q(e){return()=>e.highlightNode()}#G(e){return()=>e.clearHighlight()}#V(){if(!this.#E||!0===this.#P)return;const e=this.#e.querySelector(".crumbs");e&&(this.#E.observe(e),this.#P=!0)}async#U(){const e=this.#e.querySelector(".crumbs-scroll-container"),t=this.#e.querySelector(".crumbs-window");if(!e||!t)return;const i=await ht.read((()=>t.clientWidth)),o=await ht.read((()=>e.clientWidth));this.#z?o<i&&(this.#z=!1,this.#s()):o>i&&(this.#z=!0,this.#s())}#Q(e){if(!e.target)return;const t=e.target;this.#B(t)}#B(e){const t=e.scrollWidth-e.clientWidth,i=e.scrollLeft;this.#D=i<10?"start":i>=t-10?"end":"middle",this.#s()}#W(e){return()=>{this.#R=!0;const t=this.#e.querySelector(".crumbs-window");if(!t)return;const i=t.clientWidth/2,o="left"===e?Math.max(Math.floor(t.scrollLeft-i),0):t.scrollLeft+i;t.scrollTo({behavior:"smooth",left:o})}}#Y(e,t){const i=r.Directives.classMap({overflow:!0,[e]:!0,hidden:!this.#z}),o=lt("left"===e?at.scrollLeft:at.scrollRight);return r.html` <button class="${i}" @click="${this.#W(e)}" ?disabled="${t}" aria-label="${o}" title="${o}"> <${a.Icon.Icon.litTagName} .data="${{iconName:"triangle-"+e,color:"var(--color-text-primary)",width:"12px",height:"10px"}}"> </${a.Icon.Icon.litTagName}> </button> `}#s(){const e=ot(this.#L,this.#I);r.render(r.html` <nav class="crumbs" aria-label="${lt(at.breadcrumbs)}"> ${this.#Y("left","start"===this.#D)} <div class="crumbs-window" @scroll="${this.#Q}"> <ul class="crumbs-scroll-container"> ${e.map((e=>{const t={crumb:!0,selected:e.selected};return r.html` <li class="${r.Directives.classMap(t)}" data-node-id="${e.node.id}" data-crumb="true"> <a href="#" draggable="false" class="crumb-link" @click="${this.#j(e.node)}" @mousemove="${this.#A(e.node)}" @mouseleave="${this.#F(e.node)}" @focus="${this.#q(e.node)}" @blur="${this.#G(e.node)}"><${c.NodeText.NodeText.litTagName} data-node-title="${e.title.main}" .data="${{nodeTitle:e.title.main,nodeId:e.title.extras.id,nodeClasses:e.title.extras.classes}}"></${c.NodeText.NodeText.litTagName}></a> `}))} </ul> </div> ${this.#Y("right","end"===this.#D)} </nav> `,this.#e,{host:this}),this.#U(),this.#V(),this.#H()}async#H(){if(!this.#I||!this.#e||!this.#z||this.#R)return;const e=this.#I.id,t=this.#e.querySelector(`.crumb[data-node-id="${e}"]`);t&&await ht.scroll((()=>{t.scrollIntoView({behavior:"auto"})}))}}i.CustomElements.defineComponent("devtools-elements-breadcrumbs",pt);var mt=Object.freeze({__proto__:null,NodeSelectedEvent:dt,ElementsBreadcrumbs:pt});const ut=new CSSStyleSheet;ut.replaceSync(":host{display:inline-flex;vertical-align:middle}:host(.hidden){display:none}.expand-button{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:14px;height:10px;margin:0 2px;border:1px solid var(--override-adorner-border-color,var(--color-details-hairline));border-radius:10px;background:var(--override-adorner-background-color,var(--color-background-elevation-1))}.expand-button:hover{background:var(--color-background-elevation-2)}.dot{height:2px;width:2px;background:var(--color-text-disabled);border-radius:50%}.dot + .dot{margin-left:1px}\n/*# sourceURL=elementsTreeExpandButton.css */\n");class gt extends HTMLElement{static litTagName=r.literal`devtools-elements-tree-expand-button`;#e=this.attachShadow({mode:"open"});#X=()=>{};set data(e){this.#X=e.clickHandler,this.#K()}#K(){this.#s()}connectedCallback(){this.#e.adoptedStyleSheets=[ut]}#s(){r.render(r.html`<span class="expand-button" @click="${this.#X}"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span>`,this.#e,{host:this})}}i.CustomElements.defineComponent("devtools-elements-tree-expand-button",gt);var ft=Object.freeze({__proto__:null,ElementsTreeExpandButton:gt});const vt=e=>({parentNode:e.parentNode?vt(e.parentNode):null,id:e.id,nodeType:e.nodeType(),pseudoType:e.pseudoType(),shadowRootType:e.shadowRootType(),nodeName:e.nodeName(),nodeNameNicelyCased:e.nodeNameInCorrectCase(),legacyDomNode:e,highlightNode:t=>e.highlight(t),clearHighlight:()=>l.OverlayModel.OverlayModel.hideDOMNodeHighlight(),getAttribute:e.getAttribute.bind(e)});var bt=Object.freeze({__proto__:null,legacyNodeToElementsComponentsNode:vt});const kt=new CSSStyleSheet;kt.replaceSync('*{box-sizing:border-box;font-size:12px}.header{background-color:var(--color-background-elevation-1);border-bottom:var(--legacy-divider-border);line-height:1.6;overflow:hidden;padding:0 5px;white-space:nowrap}.header::marker{color:rgb(110 110 110);font-size:11px;line-height:1}.header:focus{background-color:var(--legacy-focus-bg-color)}.content-section{padding:16px;border-bottom:var(--legacy-divider-border);overflow-x:hidden}.content-section-title{font-size:12px;font-weight:500;line-height:1.1;margin:0;padding:0}.checkbox-settings{margin-top:8px;display:grid;grid-template-columns:1fr;gap:5px}.checkbox-label{display:flex;flex-direction:row;align-items:center;min-width:40px}.checkbox-settings .checkbox-label{margin-bottom:8px}.checkbox-settings .checkbox-label:last-child{margin-bottom:0}.checkbox-label input{margin:0 6px 0 0;padding:0;flex:none}.checkbox-label input:focus{outline:auto 5px -webkit-focus-ring-color}.checkbox-label > span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select-settings{margin-top:16px}.select-label{display:flex;flex-direction:column}.select-label span{margin-bottom:4px}.elements{margin-top:12px;color:var(--color-token-tag);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:8px}.element{display:flex;flex-direction:row;align-items:center}.show-element{margin:0 0 0 8px;cursor:pointer;flex:none;--icon-show-element:var(--icon-default)}.show-element:focus,\n.show-element:hover{--icon-show-element:var(--icon-default-hover)}.chrome-select{min-width:0;max-width:150px}.color-picker{opacity:0%}.color-picker-label{border:1px solid rgb(128 128 128/60%);cursor:default;display:inline-block;flex:none;height:10px;margin:0 0 0 8px;width:10px;position:relative}.color-picker-label input[type="color"]{width:100%;height:100%;position:absolute}.color-picker-label:hover,\n.color-picker-label:focus{border:1px solid var(--legacy-accent-color-hover);transform:scale(1.2)}.node-text-container{line-height:16px;padding:0 0.5ex;border-radius:5px}.node-text-container:hover{background-color:var(--item-hover-color)}\n/*# sourceURL=layoutPane.css */\n');const wt={chooseElementOverlayColor:"Choose the overlay color for this element",showElementInTheElementsPanel:"Show element in the Elements panel",grid:"Grid",overlayDisplaySettings:"Overlay display settings",gridOverlays:"Grid overlays",noGridLayoutsFoundOnThisPage:"No grid layouts found on this page",flexbox:"Flexbox",flexboxOverlays:"Flexbox overlays",noFlexboxLayoutsFoundOnThisPage:"No flexbox layouts found on this page",colorPickerOpened:"Color picker opened."},yt=e.i18n.registerUIStrings("panels/elements/components/LayoutPane.ts",wt),xt=e.i18n.getLocalizedString.bind(void 0,yt),{render:St,html:Tt}=r,Ot=e=>{const t=e.getAttribute("class");return{id:e.id,color:"#000",name:e.localName(),domId:e.getAttribute("id"),domClasses:t?t.split(/\s+/).filter((e=>Boolean(e))):void 0,enabled:!1,reveal:()=>{s.Revealer.reveal(e),e.scrollIntoView()},highlight:()=>{e.highlight()},hideHighlight:()=>{l.OverlayModel.OverlayModel.hideDOMNodeHighlight()},toggle:e=>{throw new Error("Not implemented")},setColor(e){throw new Error("Not implemented")}}},Ct=e=>e.map((e=>{const t=Ot(e),i=e.id;return{...t,color:e.domModel().overlayModel().colorOfGridInPersistentOverlay(i)||"#000",enabled:e.domModel().overlayModel().isHighlightedGridInPersistentOverlay(i),toggle:t=>{t?e.domModel().overlayModel().highlightGridInPersistentOverlay(i):e.domModel().overlayModel().hideGridInPersistentOverlay(i)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfGridInPersistentOverlay(i,t)}}})),Nt=e=>e.map((e=>{const t=Ot(e),i=e.id;return{...t,color:e.domModel().overlayModel().colorOfFlexInPersistentOverlay(i)||"#000",enabled:e.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(i),toggle:t=>{t?e.domModel().overlayModel().highlightFlexContainerInPersistentOverlay(i):e.domModel().overlayModel().hideFlexContainerInPersistentOverlay(i)},setColor(t){this.color=t,e.domModel().overlayModel().setColorOfFlexInPersistentOverlay(i,t)}}}));function Mt(e){return e.type===s.Settings.SettingType.ENUM}function Et(e){return e.type===s.Settings.SettingType.BOOLEAN}const _t=o.RenderCoordinator.RenderCoordinator.instance();let $t;class Lt extends d.LegacyWrapper.WrappableComponent{static litTagName=r.literal`devtools-layout-pane`;#e=this.attachShadow({mode:"open"});#p=[];#J;#Z;constructor(){super(),this.#p=this.#ee(),this.#J=s.Settings.Settings.instance().moduleSetting("showUAShadowDOM"),this.#Z=[],this.#e.adoptedStyleSheets=[n.checkboxStyles,kt,Fe]}static instance(){return $t||($t=d.LegacyWrapper.legacyWrapper(h.Widget.Widget,new Lt)),$t.getComponent()}modelAdded(e){const t=e.overlayModel();t.addEventListener(l.OverlayModel.Events.PersistentGridOverlayStateChanged,this.render,this),t.addEventListener(l.OverlayModel.Events.PersistentFlexContainerOverlayStateChanged,this.render,this),this.#Z.push(e)}modelRemoved(e){const t=e.overlayModel();t.removeEventListener(l.OverlayModel.Events.PersistentGridOverlayStateChanged,this.render,this),t.removeEventListener(l.OverlayModel.Events.PersistentFlexContainerOverlayStateChanged,this.render,this),this.#Z=this.#Z.filter((t=>t!==e))}async#te(e){const t=this.#J.get(),i=[];for(const o of this.#Z)try{const r=await o.getNodesByStyle(e,!0);for(const e of r){const r=o.nodeForId(e);null===r||!t&&r.ancestorUserAgentShadowRoot()||i.push(r)}}catch(e){console.warn(e)}return i}async#ie(){return await this.#te([{name:"display",value:"grid"},{name:"display",value:"inline-grid"}])}async#oe(){return await this.#te([{name:"display",value:"flex"},{name:"display",value:"inline-flex"}])}#ee(){const e=[];for(const t of["showGridLineLabels","showGridTrackSizes","showGridAreas","extendGridLines"]){const i=s.Settings.Settings.instance().moduleSetting(t),o=i.get(),r=i.type();if(!r)throw new Error("A setting provided to LayoutSidebarPane does not have a setting type");if(r!==s.Settings.SettingType.BOOLEAN&&r!==s.Settings.SettingType.ENUM)throw new Error("A setting provided to LayoutSidebarPane does not have a supported setting type");const n={type:r,name:i.name,title:i.title()};("boolean"==typeof o||"string"==typeof o)&&e.push({...n,value:o,options:i.options().map((e=>({...e,value:e.value})))})}return e}onSettingChanged(e,t){s.Settings.Settings.instance().moduleSetting(e).set(t)}wasShown(){for(const e of this.#p)s.Settings.Settings.instance().moduleSetting(e.name).addChangeListener(this.render,this);for(const e of this.#Z)this.modelRemoved(e);this.#Z=[],l.TargetManager.TargetManager.instance().observeModels(l.DOMModel.DOMModel,this,{scoped:!0}),h.Context.Context.instance().addFlavorChangeListener(l.DOMModel.DOMNode,this.render,this),this.#J.addChangeListener(this.render,this),this.render()}willHide(){for(const e of this.#p)s.Settings.Settings.instance().moduleSetting(e.name).removeChangeListener(this.render,this);l.TargetManager.TargetManager.instance().unobserveModels(l.DOMModel.DOMModel,this),h.Context.Context.instance().removeFlavorChangeListener(l.DOMModel.DOMNode,this.render,this),this.#J.removeChangeListener(this.render,this)}#re(e){if(!e.target)return;const t=e.target.parentElement;if(!t)throw new Error("<details> element is not found for a <summary> element");switch(e.key){case"ArrowLeft":t.open=!1;break;case"ArrowRight":t.open=!0}}async render(){const e=Ct(await this.#ie()),t=Nt(await this.#oe());await _t.write("LayoutPane render",(()=>{St(Tt` <details open> <summary class="header" @keydown="${this.#re}"> ${xt(wt.grid)} </summary> <div class="content-section"> <h3 class="content-section-title">${xt(wt.overlayDisplaySettings)}</h3> <div class="select-settings"> ${this.#ne().map((e=>this.#se(e)))} </div> <div class="checkbox-settings"> ${this.#ae().map((e=>this.#ce(e)))} </div> </div> ${e?Tt`<div class="content-section"> <h3 class="content-section-title"> ${e.length?xt(wt.gridOverlays):xt(wt.noGridLayoutsFoundOnThisPage)} </h3> ${e.length?Tt`<div class="elements"> ${e.map((e=>this.#le(e)))} </div>`:""} </div>`:""} </details> ${void 0!==t?Tt` <details open> <summary class="header" @keydown="${this.#re}"> ${xt(wt.flexbox)} </summary> ${t?Tt`<div class="content-section"> <h3 class="content-section-title"> ${t.length?xt(wt.flexboxOverlays):xt(wt.noFlexboxLayoutsFoundOnThisPage)} </h3> ${t.length?Tt`<div class="elements"> ${t.map((e=>this.#le(e)))} </div>`:""} </div>`:""} </details> `:""} `,this.#e,{host:this})}))}#ne(){return this.#p.filter(Mt)}#ae(){return this.#p.filter(Et)}#de(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.checked)}#he(e,t){t.preventDefault(),this.onSettingChanged(e.name,t.target.value)}#pe(e,t){t.preventDefault(),e.toggle(t.target.checked)}#me(e,t){t.preventDefault(),e.reveal()}#ue(e,t){t.preventDefault(),e.setColor(t.target.value),this.render()}#ge(e,t){t.preventDefault(),e.highlight()}#fe(e,t){t.preventDefault(),e.hideHighlight()}#le(e){const t=this.#pe.bind(this,e),i=this.#me.bind(this,e),o=this.#ue.bind(this,e),r=this.#ge.bind(this,e),n=this.#fe.bind(this,e);return Tt`<div class="element"> <label data-element="true" class="checkbox-label"> <input data-input="true" type="checkbox" .checked="${e.enabled}" @change="${t}"> <span class="node-text-container" data-label="true" @mouseenter="${r}" @mouseleave="${n}"> <${c.NodeText.NodeText.litTagName} .data="${{nodeId:e.domId,nodeTitle:e.name,nodeClasses:e.domClasses}}"></${c.NodeText.NodeText.litTagName}> </span> </label> <label @keyup="${e=>{if("Enter"!==e.key&&" "!==e.key)return;e.target.querySelector("input").click(),h.ARIAUtils.alert(xt(wt.colorPickerOpened)),e.preventDefault()}}" @keydown="${e=>{" "===e.key&&e.preventDefault()}}" class="color-picker-label" style="background: ${e.color};"> <input @change="${o}" @input="${o}" title="${xt(wt.chooseElementOverlayColor)}" tabindex="0" class="color-picker" type="color" value="${e.color}"> </label> <${a.Icon.Icon.litTagName} .data="${{iconName:"select-element",color:"var(--icon-show-element)",width:"16px"}}" tabindex="0" , @click="${i}" title="${xt(wt.showElementInTheElementsPanel)}" class="show-element"> </${a.Icon.Icon.litTagName}> </div>`}#ce(e){const t=this.#de.bind(this,e);return Tt`<label data-boolean-setting="true" class="checkbox-label" title="${e.title}"> <input data-input="true" type="checkbox" .checked="${e.value}" @change="${t}"> <span data-label="true">${e.title}</span> </label>`}#se(e){const t=this.#he.bind(this,e);return Tt`<label data-enum-setting="true" class="select-label" title="${e.title}"> <select class="chrome-select" data-input="true" @change="${t}"> ${e.options.map((t=>Tt`<option value="${t.value}" .selected="${e.value===t.value}">${t.title}`))} </select> </label>`}}i.CustomElements.defineComponent("devtools-layout-pane",Lt);var It=Object.freeze({__proto__:null,LayoutPane:Lt}),zt=Object.freeze({__proto__:null});const Dt=new CSSStyleSheet;Dt.replaceSync(".container-link{display:inline-block;color:var(--color-text-disabled)}.container-link:hover{color:var(--color-link)}.queried-size-details{color:var(--color-text-primary)}.axis-icon{margin-left:0.4em;width:16px;height:12px;vertical-align:text-top}.axis-icon.hidden{display:none}.axis-icon.vertical{transform:rotate(90deg)}\n/*# sourceURL=queryContainer.css */\n");const{render:Pt,html:Rt}=r,{PhysicalAxis:jt,QueryAxis:Ht}=l.CSSContainerQuery;class Bt extends Event{static eventName="queriedsizerequested";constructor(){super(Bt.eventName,{})}}class At extends HTMLElement{static litTagName=r.literal`devtools-query-container`;#e=this.attachShadow({mode:"open"});#O;#ve;#be;#ke=!1;#we;set data(e){this.#O=e.queryName,this.#ve=e.container,this.#be=e.onContainerLinkClick,this.#s()}connectedCallback(){this.#e.adoptedStyleSheets=[Dt]}updateContainerQueriedSizeDetails(e){this.#we=e,this.#s()}async#ye(){this.#ve?.highlightNode("container-outline"),this.#ke=!0,this.dispatchEvent(new Bt)}#xe(){this.#ve?.clearHighlight(),this.#ke=!1,this.#s()}#s(){if(!this.#ve)return;let e,t;this.#O||(e=this.#ve.getAttribute("id"),t=this.#ve.getAttribute("class")?.split(/\s+/).filter(Boolean));const i=this.#O||this.#ve.nodeNameNicelyCased;Pt(Rt` → <a href="#" draggable="false" class="container-link" @click="${this.#be}" @mouseenter="${this.#ye}" @mouseleave="${this.#xe}"><${c.NodeText.NodeText.litTagName} data-node-title="${i}" .data="${{nodeTitle:i,nodeId:e,nodeClasses:t}}"></${c.NodeText.NodeText.litTagName}></a> ${this.#ke?this.#Se():r.nothing} `,this.#e,{host:this})}#Se(){if(!this.#we||""===this.#we.queryAxis)return r.nothing;const e="size"===this.#we.queryAxis,t=r.Directives.classMap({"axis-icon":!0,hidden:e,vertical:"Vertical"===this.#we.physicalAxis});return Rt` <span class="queried-size-details"> (${this.#we.queryAxis}<${a.Icon.Icon.litTagName} class="${t}" .data="${{iconName:"width",color:"var(--icon-default)"}}"></${a.Icon.Icon.litTagName}>) ${e&&this.#we.width?"width:":r.nothing} ${this.#we.width||r.nothing} ${e&&this.#we.height?"height:":r.nothing} ${this.#we.height||r.nothing} </span> `}}i.CustomElements.defineComponent("devtools-query-container",At);var Ft=Object.freeze({__proto__:null,QueriedSizeRequestedEvent:Bt,QueryContainer:At});const qt=new CSSStyleSheet;qt.replaceSync(".container{padding:12px;min-width:170px}.row{padding:0;color:var(--color-text-primary);padding-bottom:16px}.row:last-child{padding-bottom:0}.property{padding-bottom:4px;white-space:nowrap}.property-name{color:var(--color-syntax-1)}.property-value{color:var(--color-text-primary)}.property-value.not-authored{color:var(--color-text-disabled)}.buttons{display:flex;flex-direction:row}.buttons > :first-child{border-radius:3px 0 0 3px}.buttons > :last-child{border-radius:0 3px 3px 0}.button{border:1px solid var(--color-background-elevation-2);background-color:var(--color-background);width:24px;height:24px;min-width:24px;min-height:24px;padding:0;margin:0;display:flex;justify-content:center;align-items:center;cursor:pointer}.button:focus-visible{outline:auto 5px -webkit-focus-ring-color}.button devtools-icon{--icon-color:var(--icon-default)}.button.selected{background-color:var(--color-background-elevation-1)}.button.selected devtools-icon{--icon-color:var(--icon-toggled)}\n/*# sourceURL=stylePropertyEditor.css */\n");const Gt={selectButton:"Add {propertyName}: {propertyValue}",deselectButton:"Remove {propertyName}: {propertyValue}"},Vt=e.i18n.registerUIStrings("panels/elements/components/StylePropertyEditor.ts",Gt),Ut=e.i18n.getLocalizedString.bind(void 0,Vt),{render:Qt,html:Wt,Directives:Yt}=r;class Xt extends Event{static eventName="propertyselected";data;constructor(e,t){super(Xt.eventName,{}),this.data={name:e,value:t}}}class Kt extends Event{static eventName="propertydeselected";data;constructor(e,t){super(Kt.eventName,{}),this.data={name:e,value:t}}}class Jt extends HTMLElement{#e=this.attachShadow({mode:"open"});#Te=new Map;#Oe=new Map;editableProperties=[];constructor(){super()}connectedCallback(){this.#e.adoptedStyleSheets=[qt]}getEditableProperties(){return this.editableProperties}set data(e){this.#Te=e.authoredProperties,this.#Oe=e.computedProperties,this.#s()}#s(){Qt(Wt` <div class="container"> ${this.editableProperties.map((e=>this.#Ce(e)))} </div> `,this.#e,{host:this})}#Ce(e){const t=this.#Te.get(e.propertyName),i=!t,o=t||this.#Oe.get(e.propertyName),r=Yt.classMap({"property-value":!0,"not-authored":i});return Wt`<div class="row"> <div class="property"> <span class="property-name">${e.propertyName}</span>: <span class="${r}">${o}</span> </div> <div class="buttons"> ${e.propertyValues.map((i=>this.#Ne(i,e.propertyName,i===t)))} </div> </div>`}#Ne(e,t,i=!1){const o=`${t}: ${e}`,r=this.findIcon(o,this.#Oe);if(!r)throw new Error(`Icon for ${o} is not found`);const n=`transform: rotate(${r.rotate}deg) scale(${r.scaleX}, ${r.scaleY})`,s=Yt.classMap({button:!0,selected:i}),c={propertyName:t,propertyValue:e},l=Ut(i?Gt.deselectButton:Gt.selectButton,c);return Wt`<button title="${l}" class="${s}" @click="${()=>this.#Me(t,e,i)}"> <${a.Icon.Icon.litTagName} style="${n}" .data="${{iconName:r.iconName,color:"var(--icon-color)",width:"20px",height:"20px"}}"></${a.Icon.Icon.litTagName}> </button>`}#Me(e,t,i){i?this.dispatchEvent(new Kt(e,t)):this.dispatchEvent(new Xt(e,t))}findIcon(e,t){throw new Error("Not implemented")}}class Zt extends Jt{editableProperties=ti;findIcon(e,t){return Re(e,t)}}i.CustomElements.defineComponent("devtools-flexbox-editor",Zt);class ei extends Jt{editableProperties=ii;findIcon(e,t){return He(e,t)}}i.CustomElements.defineComponent("devtools-grid-editor",ei);const ti=[{propertyName:"flex-direction",propertyValues:["row","column","row-reverse","column-reverse"]},{propertyName:"flex-wrap",propertyValues:["nowrap","wrap"]},{propertyName:"align-content",propertyValues:["center","flex-start","flex-end","space-around","space-between","stretch"]},{propertyName:"justify-content",propertyValues:["center","flex-start","flex-end","space-between","space-around","space-evenly"]},{propertyName:"align-items",propertyValues:["center","flex-start","flex-end","stretch","baseline"]}],ii=[{propertyName:"align-content",propertyValues:["center","space-between","space-around","space-evenly","stretch"]},{propertyName:"justify-content",propertyValues:["center","start","end","space-between","space-around","space-evenly"]},{propertyName:"align-items",propertyValues:["center","start","end","stretch","baseline"]},{propertyName:"justify-items",propertyValues:["center","start","end","stretch"]}];var oi=Object.freeze({__proto__:null,PropertySelectedEvent:Xt,PropertyDeselectedEvent:Kt,StylePropertyEditor:Jt,FlexboxEditor:Zt,GridEditor:ei,FlexboxEditableProperties:ti,GridEditableProperties:ii});export{b as AccessibilityTreeNode,T as AdornerManager,I as AdornerSettingsPane,Z as CSSHintDetailsView,ae as CSSPropertyDocsView,Ae as CSSPropertyIconResolver,Qe as CSSQuery,Je as CSSVariableValueView,H as ComputedStyleProperty,G as ComputedStyleTrace,mt as ElementsBreadcrumbs,st as ElementsBreadcrumbsUtils,ft as ElementsTreeExpandButton,bt as Helper,It as LayoutPane,zt as LayoutPaneUtils,Ft as QueryContainer,oi as StylePropertyEditor};
